﻿import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600
    property int columnWidth: 120

    ScrollView {
        flickableItem.interactive: true
        anchors.fill: parent
//        anchors.rightMargin: width/2-layout.width/2
        anchors.topMargin: 20
        anchors.leftMargin: width/2-layout.width/2
        clip: true

        ColumnLayout{
            id:layout
            anchors.centerIn: parent
            spacing: 30

            TabView {
                id:tabview1
                Tab {
                    title: "Red"
                    Rectangle { color: "red" }
                }
                Tab {
                    title: "Blue"
                    Rectangle { color: "blue" }
                }
                Tab {
                    title: "Green"
                    Rectangle { color: "green" }
                }
            }
            TabView {
                implicitHeight: 30
                Tab { title: "One" ; Item {} }
                Tab { title: "Two" ; Item {} }
                Tab { title: "Three" ; Item {} }
                Tab { title: "Four" ; Item {} }
            }

            TabView {
                implicitHeight: 30
                Tab { title: "One" ; Item {}}
                Tab { title: "Two" ; Item {}}
                Tab { title: "Three" ; Item {}}
                Tab { title: "Four" ; Item {}}
                style: tabViewStyle
            }

            TabView {
                id: tabview2
                Tab { title: "Tab 1" }
                Tab { title: "Tab 2" }
                Tab { title: "Tab 3" }

                style: TabViewStyle {
                    frameOverlap: 1
                    tabsMovable:true
                    tab: Rectangle {
                        color: styleData.selected ? "steelblue" :"lightsteelblue"
                        border.color:  "steelblue"
                        implicitWidth: Math.max(text.width + 4, 80)
                        implicitHeight: 20
                        radius: 2
                        Text {
                            id: text
                            anchors.centerIn: parent
                            text: styleData.title
                            color: styleData.selected ? "white" : "black"
                        }
                    }
                    frame: Rectangle { color: "steelblue" }
                }
            }


            Item{
                Layout.fillHeight: true;
            }
        }
        style: ScrollViewStyle {
            transientScrollBars: true
            handle: Item {
                implicitWidth: 14
                implicitHeight: 26
                Rectangle {
                    color: "#424246"
                    anchors.fill: parent
                    anchors.topMargin: 6
                    anchors.leftMargin: 4
                    anchors.rightMargin: 4
                    anchors.bottomMargin: 6
                }
            }
            scrollBarBackground: Item {
                implicitWidth: 14
                implicitHeight: 26
            }
        }
    }


    property Component tabViewStyle: TabViewStyle {
        tabOverlap: 16
        frameOverlap: 4
        tabsMovable: true

        frame: Rectangle {
            gradient: Gradient {
                GradientStop { color: "#e5e5e5" ; position: 0 }
                GradientStop { color: "#e0e0e0" ; position: 1 }
            }
            border.color: "#898989"
            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
        }
        tab: Item {
            property int totalOverlap: tabOverlap * (control.count - 1)
            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
            implicitHeight: image.sourceSize.height
            BorderImage {
                id: image
                anchors.fill: parent
                source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
                border.left: 30
                smooth: false
                border.right: 30
            }
            Text {
                text: styleData.title
                anchors.centerIn: parent
            }
        }
        leftCorner: Item { implicitWidth: 12 }
    }
}
